<template>
  <d2-container>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待考核" name="待考核">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="appraisalNo"
            label="考核单号"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="考核名称"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="assessName"
            label="考核项"
            width="150" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="考核项如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.assessName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看考核项</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessType"
            label="考核类型"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="examineName"
            label="被考核人"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            label="审核人"
            width="200" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="审核人如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.checkInfoName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看审核人员</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="考核状态"
            width="120" align="center">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="120" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '待考核'">
                <el-button type="text" @click.native.prevent="upFile(scope.$index, tableData)">
                  上传附件
                </el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待审核" name="待审核">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="300">
          <el-table-column
            prop="appraisalNo"
            label="考核单号"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="考核名称"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="assessName"
            label="考核项"
            width="150" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="考核项如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.assessName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看考核项</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessType"
            label="考核类型"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="examineName"
            label="被考核人"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            label="审核人"
            width="200" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="审核人如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.checkInfoName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看审核人员</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="考核状态"
            width="120" align="center">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已考核" name="已考核">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="300">
          <el-table-column
            prop="appraisalNo"
            label="考核单号"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="考核名称"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="assessName"
            label="考核项"
            width="150" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="考核项如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.assessName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看考核项</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="assessType"
            label="考核类型"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="examineName"
            label="被考核人"
            width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="120" align="center">
          </el-table-column>
          <el-table-column
            label="审核人"
            width="200" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="审核人如下"
                width="200"
                trigger="hover">
                <span v-for="item in scope.row.checkInfoName" :key="item">
                  <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                </span>
                <el-button slot="reference" type="text">查看审核人员</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="考核状态"
            width="120" align="center">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="120" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '已考核'">
                <el-button type="text" @click.native.prevent="showAssessResult(scope.$index, tableData)">
                  查看详情
                </el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePages.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="tablePages.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePages.total">
        </el-pagination>
      </div>

    </el-tabs>

    <el-dialog title="评分信息" :visible.sync="dialogFormVisible">
      <template>
        <el-table
          :data="showDetailData"
          height="330"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="考核单号">
                  <span>{{ props.row.appraisalNo }}</span>
                </el-form-item>
                <el-form-item label="考核名称">
                  <span>{{ props.row.templateName }}</span>
                </el-form-item>
                <el-form-item label="考核项">
                  <span>{{ props.row.assessNameOne }}</span>
                </el-form-item>
                <el-form-item label="考核类型">
                  <span>{{ props.row.assessType }}</span>
                </el-form-item>
                <el-form-item label="部门">
                  <span>{{ props.row.departmentName }}</span>
                </el-form-item>
                <el-form-item label="状态">
                  <span>{{ props.row.status }}</span>
                </el-form-item>
                <el-form-item label="评分人">
                  <span v-for="item in props.row.checkInfoName" :key="item">
                    <el-tag size="mini" style="margin:2px 2px;">{{ item }}</el-tag>
                  </span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="考核单号"
            prop="appraisalNo">
          </el-table-column>
          <el-table-column
            label="考核名称"
            prop="templateName">
          </el-table-column>
          <el-table-column
            label="考核项"
            prop="assessNameOne">
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer" style="height: 2em">
          <div style="height: 2em;display: flex;align-items: center;justify-content: end">
            <div style="font-size: 1.75em">分数：</div>
            <span style="font-size: 1.75em;margin-top: 5px">
              {{finalScore}}
            </span>
          </div>
        </div>
      </template>
    </el-dialog>

    <el-drawer
      title="请上传您的附件"
      :visible.sync="drawer"
      :with-header="false"
      size="50%">
      <review :revalues="reviewValue" @submitUpload="submitUpload"></review>
    </el-drawer>
  </d2-container>
</template>

<script>
import review from '@/views/selfInfo/toBeAssessed/reviewDetails'

export default {
  data () {
    return {
      finalScore: 0,
      dialogFormVisible: false,
      selectInfo: '',
      searchInfo: '',
      activeName: '待考核',
      tableData: null,
      drawer: false,
      reviewValue: null,
      menuStatus: null,
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 5,
        // 列表总数
        total: 0,
        // 状态
        status: '待考核',
        // id
        id: 4
      },
      showDetailData: null
    }
  },
  components: {
    review
  },
  created () {
    this.getTables(this.tablePages)
  },
  methods: {
    submitUpload (status) {
      if (status === 1) {
        this.drawer = false
        this.getTables(this.tablePages)
      }
    },
    handleClick (row) {
      if (row._props.name === '待考核') {
        this.tablePages.status = row._props.name
        this.getTables(this.tablePages)
      } else if (row._props.name === '待审核') {
        this.tablePages.status = row._props.name
        this.getTables(this.tablePages)
      } else if (row._props.name === '已考核') {
        this.tablePages.status = row._props.name
        this.getTables(this.tablePages)
      }
    },
    upFile (tableData) {
      this.drawer = true
      this.reviewValue = this.tableData[tableData]
    },
    getTables ({ currentPage, limit, status }) {
      this.$request({
        url: '/selfAppraisal/showAllData',
        method: 'post',
        data: { currentPage, limit, data: { status: status } }
      })
        .then((res) => {
          this.tableData = res.list
          this.tablePages.total = res.total
        })
    },
    /**
     * 获取当前分页数
     * @param limit 分页数
     */
    handleSizeChange (limit) {
      this.tablePages.limit = limit
      this.getTables(this.tablePages)
    },
    /**
     * 绑定切换监听事件
     * @param currentPage 切换后的页码
     */
    handleCurrentChange (currentPage) {
      this.tablePages.currentPage = currentPage
      this.getTables(this.tablePages)
    },
    /**
     * 查看详情
     */
    showAssessResult (index, tableData) {
      this.dialogFormVisible = true
      this.$request({ url: '/selfAppraisal/showDetails', method: 'post', data: { eid: tableData[index].eid } })
        .then((res) => {
          console.log(res)
          this.showDetailData = res
          this.finalScore = this.showDetailData[0].score
        })
    }
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
